<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>公租房摇号系统</title>
    <style>
        body {
            font-family: "Microsoft YaHei", Arial, sans-serif;
            margin: 0;
            padding: 20px;
            background-color: #f0f2f5;
        }

        .container {
            max-width: 1000px;
            margin: 0 auto;
            background-color: white;
            padding: 30px;
            border-radius: 12px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }

        .title {
            text-align: center;
            color: #2c3e50;
            font-size: 2.8em;
            margin: 20px 0 30px;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
        }

        .file-upload {
            margin-bottom: 25px;
        }

        .file-upload input {
            display: none;
        }

        .file-upload label {
            display: block;
            padding: 12px 25px;
            background: linear-gradient(135deg, #409eff, #3375b9);
            color: white;
            text-align: center;
            cursor: pointer;
            border-radius: 6px;
            transition: all 0.3s;
            font-size: 16px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }

        .file-upload label:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
        }

        #housingList {
            margin: 20px 0;
            padding: 15px;
            border: 1px solid #ebeef5;
            border-radius: 8px;
            background-color: #f8f9fa;
        }

        #housingList table {
            width: 100%;
            border-collapse: collapse;
        }

        #housingList th,
        #housingList td {
            border: 1px solid #e4e7ed;
            padding: 8px 12px;
            text-align: center;
            background-color: white;
        }

        #housingList th {
            color: #606266;
            background-color: #f0f2f5;
        }

        #housingList td.highlight {
            background-color: #ffeb3b;
            box-shadow: 0 0 15px #ff5722;
        }

        .result-container {
            margin-top: 25px;
            padding: 20px;
            border: 1px solid #ebeef5;
            border-radius: 8px;
            background-color: #f8f9fa;
        }

        button {
            padding: 12px 28px;
            background: linear-gradient(135deg, #67c23a, #529b2e);
            color: white;
            border: none;
            border-radius: 6px;
            cursor: pointer;
            font-size: 16px;
            transition: all 0.3s;
            margin: 10px 5px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }

        button:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
        }

        button:disabled {
            background: #c0c4cc;
            cursor: not-allowed;
            opacity: 0.7;
        }
    </style>
</head>

<body>
    <div class="container">
        <h1 class="title">阿图什市公租房随机摇号系统</h1>

        <div class="file-upload">
            <input type="file" id="fileInput" accept=".txt">
            <label for="fileInput">📁 选择房源文件</label>
        </div>

        <!-- 新增房源列表提示信息 -->
        <div id="housingListHeader">已加载房源列表(0套)</div>
        <div id="housingList">
            <table>
                <!-- 移除表头 -->
                <tbody></tbody>
            </table>
        </div>

        <button id="startButton">🎉 开始摇号</button>
        <audio id="soundEffect" src="data:audio/mpeg;base64,//uExAAAAAYAA..." ></audio>

        <div class="result-container">
            <h3>摇号结果</h3>
            <div id="resultList"></div>
        </div>

        <button onclick="saveResults()">💾 保存结果</button>
    </div>

    <script>
        let availableHouses = [];
        let drawnResults = [];
        let intervalId;
        let isLotteryRunning = false;

        document.getElementById('fileInput').addEventListener('change', function (e) {
            const file = e.target.files[0];
            const reader = new FileReader();

            reader.onload = function (e) {
                availableHouses = e.target.result.split('\n')
                   .map(num => num.trim())
                   .filter(num => num);

                displayHousingList();
                // 更新房源列表提示信息
                updateHousingListHeader();
            };

            reader.readAsText(file);
        });

        function displayHousingList() {
            const tbody = document.querySelector('#housingList tbody');
            let rows = [];
            for (let i = 0; i < availableHouses.length; i += 5) {
                let row = '<tr>';
                for (let j = 0; j < 5; j++) {
                    if (i + j < availableHouses.length) {
                        row += `<td>${availableHouses[i + j]}</td>`;
                    } else {
                        row += '<td></td>';
                    }
                }
                row += '</tr>';
                rows.push(row);
            }
            tbody.innerHTML = rows.join('');
        }

        // 新增更新房源列表提示信息的函数
        function updateHousingListHeader() {
            const header = document.getElementById('housingListHeader');
            header.textContent = `已加载房源列表(${availableHouses.length}套)`;
        }

        document.getElementById('startButton').addEventListener('mousedown', startLottery);
        document.getElementById('startButton').addEventListener('mouseup', stopLottery);

        document.addEventListener('keydown', function (e) {
            if (e.key === 'Enter' && !isLotteryRunning && availableHouses.length > 0) {
                startLottery();
            }
        });

        document.addEventListener('keyup', function (e) {
            if (e.key === 'Enter' && isLotteryRunning) {
                stopLottery();
            }
        });

        function startLottery() {
            if (availableHouses.length === 0) {
                alert('请先选择有效的房源文件！');
                return;
            }
            const btn = document.getElementById('startButton');
            const sound = document.getElementById('soundEffect');

            btn.disabled = true;
            isLotteryRunning = true;
            sound.play();
            intervalId = setInterval(highlightHouse, 100);
        }

        function highlightHouse() {
            const cells = document.querySelectorAll('#housingList td');
            cells.forEach(cell => cell.classList.remove('highlight'));

            const validCells = Array.from(cells).filter(cell => cell.textContent.trim()!== '');
            if (validCells.length > 0) {
                const randomIndex = Math.floor(Math.random() * validCells.length);
                validCells[randomIndex].classList.add('highlight');
            }
        }

        function stopLottery() {
            clearInterval(intervalId);
            const btn = document.getElementById('startButton');
            const sound = document.getElementById('soundEffect');

            sound.pause();
            sound.currentTime = 0;

            const highlightedCell = document.querySelector('#housingList td.highlight');
            if (highlightedCell) {
                const selectedHouse = highlightedCell.textContent;
                const winnerName = prompt('请输入中签人员姓名：');
                if (winnerName) {
                    drawnResults.push({
                        house: selectedHouse,
                        name: winnerName,
                        time: new Date().toLocaleString()
                    });
                    availableHouses = availableHouses.filter(house => house!== selectedHouse);
                    displayHousingList();
                    // 更新房源列表提示信息
                    updateHousingListHeader();
                    displayResultList();
                }
            }

            btn.disabled = false;
            isLotteryRunning = false;
        }

        function displayResultList() {
            const resultList = document.getElementById('resultList');
            resultList.innerHTML = drawnResults.map((item, index) => `
                <div style="padding:10px; margin:5px; background:#f4f4f5; border-radius:4px;">
                    <b>${index + 1}.</b> 
                    <span style="color:#409eff;">${item.house}</span> - 
                    <span style="color:#67c23a;">${item.name}</span>
                    <small style="color:#909399; float:right;">${item.time}</small>
                </div>
            `).join('');
        }

        function saveResults() {
            const validData = drawnResults.filter(item => item.name);
            if (validData.length === 0) {
                alert('当前没有可保存的摇号结果！');
                return;
            }

            const content = validData.map(item =>
                `房号：${item.house}\t申请人：${item.name}\t时间：${item.time}`
            ).join('\n');

            const blob = new Blob([`公租房摇号结果\n\n${content}`], { type: 'text/plain' });
            const url = URL.createObjectURL(blob);
            const a = document.createElement('a');
            a.href = url;
            a.download = `摇号结果_${new Date().toISOString().slice(0, 10)}.txt`;
            a.click();
        }
    </script>
</body>

</html>
